<template>
  <div class="good-select wap">
    <x-header v-if="!this.$fromApp(this)" class="vux-1px-b">
      <div class="header-left display-flex align-items-center" slot="overwrite-left">
        <x-icon @click="goBack" type="ios-close-empty" size="30"></x-icon>
        <span class="title-lable"><span>商品批量导入</span></span>
      </div>
    </x-header>
    <div class="search display-flex justify-content-flex-justify">
      <div class="flex-1">
        <group>
          <x-input :show-clear="false" v-model="searchKey" placeholder="请输入商品名称或品牌"></x-input>
        </group>
      </div>
      <span class="btn-search" @click="search">查询</span>
    </div>
    <div class="good-content main">


      <scroller
        ref="scroll"
        :noDataText="this.$noData(list)"
        :on-refresh="refresh"
        :on-infinite="infinite">
        <div class="list flex-1" v-if="list&&list.length>0">
          <x-table>
            <thead>
            <tr>
              <th class="id"></th>
              <th class="brand">品牌</th>
              <th class="name">商品名称</th>
              <th class="spec">商品规格</th>
              <th class="operate"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list" :key="index">

              <td>
                <check-icon :value.sync="item.expand"></check-icon>
              </td>
              <td><span class="col-item beyond-one">{{item.brandName}}</span></td>
              <td><span class="col-item beyond-one">{{item.name}}</span></td>
              <td><span class="col-item beyond-one">{{item.spec}}</span></td>
              <td @click="goDetail(item)">
                <img class="icon-detail" src="../../assets/img/customer/detail_tip.png" alt="">
                <span class="detail-lable">详情</span>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
        <no-data @refreshData="refresh(0)" :list="list"></no-data>
      </scroller>


    </div>
    <div v-if="list&&list.length>0" class="btn-comfirm display-flex justify-content-flex-center align-items-center"
         @click="comfirm">
      <span>确认导入</span>
    </div>

    <div v-transfer-dom>
      <confirm v-model="isShow" @on-confirm="confirmInit" @on-cancel="cancelInit" confirm-text="是" cancel-text="否"
               hide-on-blur>
        <p style="text-align:center;font-size: 18px">商品是否立刻上架销售？</p>
      </confirm>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        demo1: false,
        page: 1,
        hasNext: true,
        list: [],
        searchKey: "",
        isShow: false,
        checkData: [],
      }
    },
    created() {
      this.initData(0);
    },
    methods: {
      cancelInit() {
        let opt = {
          goodsCategoryId: this.$route.query.id,
          goodsCategoryName: this.$route.query.name,
          ids: this.checkData,
          immediately: false,
        }
        this.$ajax.post('goods/importGoods', opt, (res) => {
          if (res.code == 200) {
            this.$vux.toast.text('已成功导入' + res.data + '条');
            this.$callJava({
              code: 1017,
              noBack:true
            })
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, 1)
      },
      confirmInit() {
        let opt = {
          goodsCategoryId: this.$route.query.id,
          goodsCategoryName: this.$route.query.name,
          ids: this.checkData,
          immediately: true,
        }
        this.$ajax.post('goods/importGoods', opt, (res) => {
          if (res.code == 200) {
            this.$vux.toast.text('已成功导入' + res.data + '条');
            this.$callJava({
              code: 1017,
              noBack:true
            })
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, 1)

      },
      initData(type) {
        this.$ajax.get("goods/list/template", (res) => {

          if (res.code == 200) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].expand = false;
              for(let j=0;j<this.checkData.length;j++){
                if (res.data[i].id==this.checkData[j]) {
                  res.data[i].expand = true;
                  break;
                }
              }
            }
            if (type == 0) {
              this.list = res.data;
            } else {
              this.list = this.list.concat(res.data);
            }

            type == 0 && this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            console.log("=====", res.data && res.data.length < this.$rows)
            if (res.data && res.data.length < this.$rows || res.data == undefined) {
              this.hasNext = false;
              type == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
            } else {
              this.hasNext = true;
              type == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
            }
          } else {
            this.hasNext = false;
            this.$vux.toast.text(res.msg, 'center');
            type == 0 && this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
            type == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
          }
        }, {pageNo: this.page, pageSize: this.$rows, searchKey: this.searchKey});
      },
      refresh() {
        this.checkData = [];
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].expand) {
            this.checkData.push(this.list[i].id);
          }
        }

        this.hasNext = true;
        this.page = 1;
        this.initData(0);
      },
      infinite() {
        if (this.hasNext) {
          this.page++;
          this.initData(1);
        } else {
          this.$refs.scroll && this.$refs.scroll.finishInfinite(true)
        }
      },
      search() {
        if (this.searchKey.trim().length == 0) {
          this.$vux.toast.text("请输入关键词", 'center');
          return;
        }
        this.refresh();
      },
      comfirm() {
        this.checkData = [];
        let num = 0;
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].expand) {
            num = i;
            this.checkData.push(this.list[i].id);
          }
        }
        if (this.checkData.length == 1) {
          if (this.$fromApp(this)) {
            this.$callJava({code: 1006, obj: this.list[num], data: this.list[num]})
          }
        } else {
          if (this.checkData.length > 1) {
            this.isShow = true;
          }
        }

      },
      goDetail(item) {
        if (this.$fromApp(this)) {
          this.$callJava({
            url: this.$webUrl + "good/detail?from=app&id=" + item.id + "&type=1" + "&Authorization=" + this.$storage.get("token"),
            title: "商品详情"
          })
        } else {
          this.$router.push({path: '/good/detail', query: {id: item.id, type: 1}})
        }
      },
      goBack() {
        if (this.$fromApp(this)) {
          this.$callJava({code: 1006})
        } else {
          this.$router.go(-1);
        }
      }
    }

  }
</script>

<style lang="less" type="text/less" scoped>
  .good-select {
    background: #fff;

    .header-left {
      margin-top: -7px;
    }

    /deep/ .vux-header {
      background: #fff !important;
    }

    .vux-table {
      line-height: normal;

      tr {
        height: 1rem;
      }
    }

    .title-lable {
      font-size: 0.36rem;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      margin-left: .25rem;
    }

    .search {
      padding: .3rem .3rem 0 .3rem;
    }

    .good-content {

    }

    .btn-comfirm {
      text-align: center;
      height: .84rem;
      line-height: .84rem;
      background: rgba(82, 125, 217, 0);
      border: 1px solid rgba(251, 110, 82, 1);
      border-radius: .42rem;
      margin: .2rem .65rem .5rem .65rem;

      span {
        color: #FB6E52;
        font-size: .34rem;
      }
    }

    /deep/ .weui-cells:before, /deep/ .weui-cells:after {
      border: none;
    }

    /deep/ .weui-cells {
      margin-top: 0;
    }

    /deep/ .weui-input {
      font-size: .28rem;
    }

    .weui-cell {
      padding: 6px 10px;
      border: 1px solid #ddd;
      border-radius: .1rem;
    }

    .btn-serach-container {
      text-align: left;
    }

    .btn-search {
      background: rgba(142, 145, 159, 0.2);
      border: 1px solid rgba(200, 203, 211, 1);
      border-radius: .06rem;
      padding: .1rem .3rem;
      color: #868999;
      font-size: .3rem;
      margin-left: .2rem;
    }

    .list {
      height: 100%;
      position: relative;
      padding: .3rem;

      /deep/ .vux-table td:before, .vux-table th:before {
        border: none;
      }

      /deep/ .vux-table td:after, .vux-table th:after {
        border: none;
      }

      /deep/ .vux-table:after {
        border: none;
      }

      .vux-table th {
        font-weight: bold;
      }

      .id {
        width: 10%;
      }

      .brand {
        width: 20%;
      }

      .name {
        width: 30%;
      }

      .spec {
        width: 20%;
      }

      .operate {
        width: 20%;
      }

      /deep/ .weui-icon-circle, /deep/ .weui-icon-success {
        font-size: .36rem;
      }

      /deep/ .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
        color: #FB6E52;
      }

      .icon-detail {
        width: .32rem;
        height: .32rem;
        vertical-align: middle;
      }

      .detail-lable {
        vertical-align: middle;
        margin-left: .05rem;
      }

      .col-item {
        color: #333;
        font-size: .28rem;
        position: relative;
        margin-bottom: -0.03rem;
      }

    }

    .check-normal {
      fill: #bbb;
      vertical-align: middle;
    }

    .check-active {
      fill: #FB6E52;
      vertical-align: middle;
    }

  }


</style>
